<template>
  <div class="w-full max-w-4xl mx-auto">
    <!-- 文章头部 -->
    <header class="mb-8">
      <div class="mb-4">
        <span class="inline-block bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-medium">
          前端开发
        </span>
        <span class="text-gray-500 text-sm ml-4">2024-01-12</span>
      </div>
      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
        CSS Grid 布局实战技巧
      </h1>
      <p class="text-xl text-gray-600 mb-6">
        掌握 CSS Grid 布局的核心概念和实用技巧，创建响应式网页布局变得简单高效
      </p>
      <div class="flex flex-wrap gap-2 mb-6">
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">CSS</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">布局</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">响应式</span>
        <span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">Grid</span>
      </div>
      <div class="flex items-center text-gray-500 text-sm">
        <span>📖 阅读时间：6 分钟</span>
        <span class="mx-4">•</span>
        <span>👁️ 1,234 次阅读</span>
      </div>
    </header>

    <!-- 文章内容 -->
    <article class="prose prose-lg max-w-none">
      <!-- 引言 -->
      <div class="bg-blue-50 border-l-4 border-blue-400 p-6 mb-8">
        <p class="text-blue-800 font-medium">
          CSS Grid 是现代 Web 布局的强大工具，它提供了二维布局能力，让我们能够轻松创建复杂的网页布局。
          本文将深入探讨 CSS Grid 的核心概念和实战技巧。
        </p>
      </div>

      <!-- 目录 -->
      <div class="bg-gray-50 rounded-xl p-6 mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">📋 目录</h2>
        <ul class="space-y-2 text-gray-700">
          <li><a href="#basics" class="text-indigo-600 hover:text-indigo-800">1. CSS Grid 基础概念</a></li>
          <li><a href="#container" class="text-indigo-600 hover:text-indigo-800">2. Grid 容器属性</a></li>
          <li><a href="#items" class="text-indigo-600 hover:text-indigo-800">3. Grid 项目属性</a></li>
          <li><a href="#responsive" class="text-indigo-600 hover:text-indigo-800">4. 响应式 Grid 布局</a></li>
          <li><a href="#practical" class="text-indigo-600 hover:text-indigo-800">5. 实战案例</a></li>
          <li><a href="#tips" class="text-indigo-600 hover:text-indigo-800">6. 最佳实践</a></li>
        </ul>
      </div>

      <!-- 1. 基础概念 -->
      <section id="basics" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">1. CSS Grid 基础概念</h2>

        <p class="text-gray-700 mb-6">
          CSS Grid 是一个二维布局系统，它允许我们同时控制行和列的布局。与 Flexbox 不同，Grid 专门用于创建网格布局。
        </p>

        <div class="bg-gray-50 rounded-xl p-6 mb-6">
          <h3 class="text-xl font-semibold text-gray-800 mb-4">核心概念：</h3>
          <ul class="space-y-3 text-gray-700">
            <li><strong>Grid Container（网格容器）</strong>：应用 <code
                class="bg-gray-200 px-2 py-1 rounded">display: grid</code> 的元素</li>
            <li><strong>Grid Item（网格项目）</strong>：网格容器的直接子元素</li>
            <li><strong>Grid Line（网格线）</strong>：构成网格结构的分界线</li>
            <li><strong>Grid Track（网格轨道）</strong>：两条相邻网格线之间的空间</li>
            <li><strong>Grid Cell（网格单元格）</strong>：网格行和网格列的交集</li>
            <li><strong>Grid Area（网格区域）</strong>：任意数量的网格单元格组成</li>
          </ul>
        </div>

        <div class="bg-indigo-50 border border-indigo-200 rounded-xl p-6">
          <h3 class="text-xl font-semibold text-indigo-800 mb-4">💡 快速开始</h3>
          <pre class="bg-white rounded-lg p-4 overflow-x-auto"><code class="text-sm">.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 20px;
}</code></pre>
        </div>
      </section>

      <!-- 2. Grid 容器属性 -->
      <section id="container" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">2. Grid 容器属性</h2>

        <div class="space-y-8">
          <!-- grid-template-columns -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">grid-template-columns</h3>
            <p class="text-gray-700 mb-4">定义网格的列数和每列的宽度。</p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
              <div class="bg-white border rounded-lg p-4">
                <h4 class="font-semibold text-gray-800 mb-2">固定宽度</h4>
                <pre class="text-sm bg-gray-50 p-3 rounded"><code>grid-template-columns: 200px 200px 200px;</code></pre>
              </div>
              <div class="bg-white border rounded-lg p-4">
                <h4 class="font-semibold text-gray-800 mb-2">弹性宽度</h4>
                <pre class="text-sm bg-gray-50 p-3 rounded"><code>grid-template-columns: 1fr 2fr 1fr;</code></pre>
              </div>
            </div>

            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
              <p class="text-yellow-800 text-sm">
                <strong>提示：</strong>使用 <code class="bg-yellow-200 px-1 rounded">fr</code> 单位可以创建弹性布局，它会自动分配剩余空间。
              </p>
            </div>
          </div>

          <!-- grid-template-rows -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">grid-template-rows</h3>
            <p class="text-gray-700 mb-4">定义网格的行数和每行的高度。</p>

            <div class="bg-white border rounded-lg p-4 mb-4">
              <pre class="text-sm bg-gray-50 p-3 rounded"><code>grid-template-rows: 100px 200px auto;</code></pre>
              <p class="text-gray-600 text-sm mt-2">auto 关键字让行高根据内容自动调整</p>
            </div>
          </div>

          <!-- gap -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">gap</h3>
            <p class="text-gray-700 mb-4">设置网格项目之间的间距。</p>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              <div class="bg-white border rounded-lg p-4 text-center">
                <h4 class="font-semibold text-gray-800 mb-2">行间距</h4>
                <pre class="text-sm bg-gray-50 p-2 rounded"><code>row-gap: 20px;</code></pre>
              </div>
              <div class="bg-white border rounded-lg p-4 text-center">
                <h4 class="font-semibold text-gray-800 mb-2">列间距</h4>
                <pre class="text-sm bg-gray-50 p-2 rounded"><code>column-gap: 20px;</code></pre>
              </div>
              <div class="bg-white border rounded-lg p-4 text-center">
                <h4 class="font-semibold text-gray-800 mb-2">统一间距</h4>
                <pre class="text-sm bg-gray-50 p-2 rounded"><code>gap: 20px;</code></pre>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 3. Grid 项目属性 -->
      <section id="items" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">3. Grid 项目属性</h2>

        <div class="space-y-8">
          <!-- grid-column / grid-row -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">grid-column / grid-row</h3>
            <p class="text-gray-700 mb-4">控制网格项目占据的列和行。</p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <div class="grid grid-cols-4 gap-2 mb-4">
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">1</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">2</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">3</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">4</div>
                <div class="bg-green-500 text-white p-3 text-center text-sm col-span-2">5 (span 2)</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">6</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">7</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">8</div>
                <div class="bg-indigo-500 text-white p-3 text-center text-sm">9</div>
              </div>
              <pre class="text-sm bg-gray-50 p-3 rounded"><code>.item-5 {
  grid-column: span 2; /* 跨越2列 */
}</code></pre>
            </div>
          </div>

          <!-- grid-area -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">grid-area</h3>
            <p class="text-gray-700 mb-4">为网格项目指定一个区域名称，实现更灵活的布局。</p>

            <div class="bg-white border rounded-lg p-6 mb-4">
              <div class="grid grid-cols-3 grid-rows-3 gap-2 mb-4 h-48">
                <div class="bg-red-500 text-white p-3 text-center text-sm">Header</div>
                <div class="bg-red-500 text-white p-3 text-center text-sm">Header</div>
                <div class="bg-red-500 text-white p-3 text-center text-sm">Header</div>
                <div class="bg-blue-500 text-white p-3 text-center text-sm">Sidebar</div>
                <div class="bg-green-500 text-white p-3 text-center text-sm">Main</div>
                <div class="bg-green-500 text-white p-3 text-center text-sm">Main</div>
                <div class="bg-blue-500 text-white p-3 text-center text-sm">Sidebar</div>
                <div class="bg-green-500 text-white p-3 text-center text-sm">Main</div>
                <div class="bg-green-500 text-white p-3 text-center text-sm">Main</div>
              </div>
              <pre class="text-sm bg-gray-50 p-3 rounded"><code>.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

.container {
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "sidebar main main";
}</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 4. 响应式 Grid 布局 -->
      <section id="responsive" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">4. 响应式 Grid 布局</h2>

        <p class="text-gray-700 mb-6">
          使用 CSS Grid 创建响应式布局非常简单，结合媒体查询可以实现完美的适配效果。
        </p>

        <div class="bg-white border rounded-lg p-6 mb-6">
          <h3 class="text-xl font-semibold text-gray-800 mb-4">响应式网格示例</h3>
          <pre class="text-sm bg-gray-50 p-4 rounded overflow-x-auto"><code>.responsive-grid {
  display: grid;
  gap: 20px;
  padding: 20px;
}

/* 移动端：单列 */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}

/* 平板：双列 */
@media (min-width: 769px) and (max-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面：三列 */
@media (min-width: 1025px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}</code></pre>
        </div>

        <div class="bg-green-50 border border-green-200 rounded-xl p-6">
          <h3 class="text-xl font-semibold text-green-800 mb-4">🚀 高级技巧：auto-fit 和 auto-fill</h3>
          <p class="text-green-700 mb-4">
            使用 <code class="bg-green-200 px-1 rounded">repeat(auto-fit, minmax(300px, 1fr))</code> 可以创建完全自适应的网格布局。
          </p>
          <pre class="text-sm bg-white p-4 rounded"><code>.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}</code></pre>
        </div>
      </section>

      <!-- 5. 实战案例 -->
      <section id="practical" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">5. 实战案例</h2>

        <div class="space-y-8">
          <!-- 案例1：卡片网格 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">案例1：响应式卡片网格</h3>
            <div class="bg-white border rounded-lg p-6 mb-4">
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
                <div class="bg-gradient-to-br from-blue-400 to-blue-600 text-white p-6 rounded-lg">
                  <h4 class="font-semibold mb-2">卡片 1</h4>
                  <p class="text-sm opacity-90">这是一个使用 Grid 布局的卡片示例</p>
                </div>
                <div class="bg-gradient-to-br from-purple-400 to-purple-600 text-white p-6 rounded-lg">
                  <h4 class="font-semibold mb-2">卡片 2</h4>
                  <p class="text-sm opacity-90">响应式布局自动调整列数</p>
                </div>
                <div class="bg-gradient-to-br from-green-400 to-green-600 text-white p-6 rounded-lg">
                  <h4 class="font-semibold mb-2">卡片 3</h4>
                  <p class="text-sm opacity-90">在不同屏幕尺寸下完美显示</p>
                </div>
              </div>
              <pre class="text-sm bg-gray-50 p-3 rounded"><code>.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}</code></pre>
            </div>
          </div>

          <!-- 案例2：页面布局 -->
          <div>
            <h3 class="text-2xl font-semibold text-gray-800 mb-4">案例2：经典页面布局</h3>
            <div class="bg-white border rounded-lg p-6 mb-4">
              <div class="grid grid-cols-12 gap-4 h-64 mb-4">
                <div class="col-span-12 bg-red-500 text-white p-4 rounded flex items-center justify-center">
                  Header
                </div>
                <div class="col-span-3 bg-blue-500 text-white p-4 rounded flex items-center justify-center">
                  Sidebar
                </div>
                <div class="col-span-6 bg-green-500 text-white p-4 rounded flex items-center justify-center">
                  Main Content
                </div>
                <div class="col-span-3 bg-yellow-500 text-white p-4 rounded flex items-center justify-center">
                  Aside
                </div>
                <div class="col-span-12 bg-gray-500 text-white p-4 rounded flex items-center justify-center">
                  Footer
                </div>
              </div>
              <pre class="text-sm bg-gray-50 p-3 rounded"><code>.page-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.header { grid-column: span 12; }
.sidebar { grid-column: span 3; }
.main { grid-column: span 6; }
.aside { grid-column: span 3; }
.footer { grid-column: span 12; }</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 6. 最佳实践 -->
      <section id="tips" class="mb-12">
        <h2 class="text-3xl font-bold text-gray-800 mb-6">6. 最佳实践</h2>

        <div class="space-y-6">
          <div class="bg-white border rounded-lg p-6">
            <h3 class="text-xl font-semibold text-gray-800 mb-3">✅ 推荐做法</h3>
            <ul class="space-y-2 text-gray-700">
              <li>• 使用 <code class="bg-gray-200 px-1 rounded">fr</code> 单位创建弹性布局</li>
              <li>• 结合 <code class="bg-gray-200 px-1 rounded">minmax()</code> 设置最小和最大尺寸</li>
              <li>• 使用 <code class="bg-gray-200 px-1 rounded">auto-fit</code> 或 <code
                  class="bg-gray-200 px-1 rounded">auto-fill</code> 创建自适应网格</li>
              <li>• 合理使用 <code class="bg-gray-200 px-1 rounded">gap</code> 属性设置间距</li>
              <li>• 为复杂布局使用 <code class="bg-gray-200 px-1 rounded">grid-template-areas</code></li>
            </ul>
          </div>

          <div class="bg-white border rounded-lg p-6">
            <h3 class="text-xl font-semibold text-gray-800 mb-3">❌ 避免的做法</h3>
            <ul class="space-y-2 text-gray-700">
              <li>• 不要过度使用固定像素值</li>
              <li>• 避免创建过于复杂的网格结构</li>
              <li>• 不要忽略移动端的适配</li>
              <li>• 避免使用过多的嵌套网格</li>
            </ul>
          </div>

          <div class="bg-blue-50 border border-blue-200 rounded-xl p-6">
            <h3 class="text-xl font-semibold text-blue-800 mb-4">💡 性能优化建议</h3>
            <ul class="space-y-2 text-blue-700">
              <li>• 使用 <code class="bg-blue-200 px-1 rounded">will-change: grid</code> 优化动画性能</li>
              <li>• 避免频繁改变网格结构</li>
              <li>• 合理使用 <code class="bg-blue-200 px-1 rounded">grid-auto-rows</code> 和 <code
                  class="bg-blue-200 px-1 rounded">grid-auto-columns</code></li>
            </ul>
          </div>
        </div>
      </section>

      <!-- 总结 -->
      <section class="mb-12">
        <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl p-8">
          <h2 class="text-3xl font-bold mb-4">总结</h2>
          <p class="text-lg opacity-90 mb-4">
            CSS Grid 是现代 Web 布局的强大工具，掌握这些技巧可以让你轻松创建复杂的响应式布局。
            记住，实践是最好的学习方式，多尝试不同的布局组合。
          </p>
          <div class="flex flex-wrap gap-4">
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">二维布局</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">响应式设计</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">灵活控制</span>
            <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">现代 CSS</span>
          </div>
        </div>
      </section>
    </article>

    <!-- 文章底部 -->
    <footer class="border-t pt-8 mt-12">
      <div class="flex flex-wrap justify-between items-center mb-6">
        <div class="flex items-center space-x-4">
          <button class="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
            <span>👍</span>
            <span>有用 (123)</span>
          </button>
          <button class="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
            <span>💬</span>
            <span>评论 (45)</span>
          </button>
          <button class="flex items-center space-x-2 text-gray-600 hover:text-indigo-600 transition-colors">
            <span>📤</span>
            <span>分享</span>
          </button>
        </div>
        <div class="flex items-center space-x-4">
          <span class="text-gray-500 text-sm">阅读时间：6 分钟</span>
          <span class="text-gray-500 text-sm">•</span>
          <span class="text-gray-500 text-sm">1,234 次阅读</span>
        </div>
      </div>

      <!-- 相关文章 -->
      <div class="bg-gray-50 rounded-xl p-6">
        <h3 class="text-xl font-semibold text-gray-800 mb-4">📚 相关文章</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <a href="#" class="block p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
            <h4 class="font-semibold text-gray-800 mb-2">Flexbox 布局完全指南</h4>
            <p class="text-gray-600 text-sm">深入理解 Flexbox 布局的核心概念和实用技巧</p>
          </a>
          <a href="#" class="block p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
            <h4 class="font-semibold text-gray-800 mb-2">CSS 响应式设计最佳实践</h4>
            <p class="text-gray-600 text-sm">掌握响应式设计的核心原则和实现方法</p>
          </a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
// 设置页面元数据
useHead({
  title: 'CSS Grid 布局实战技巧 - 我的博客',
  meta: [
    { name: 'description', content: '深入探讨 CSS Grid 布局的核心概念和实用技巧，帮助你更好地理解现代 CSS 布局技术。' },
    { name: 'keywords', content: 'CSS, Grid, 布局, 响应式, 前端开发' }
  ]
})
</script>